<template>
	<page-meta :page-style="autoa">
		<navigation-bar :title="detail.name" background-color="#354e44" />
	</page-meta>
	<view class="product-detail">
		<swiper class="product-detail-banner-container" indicator-dots autoplay :interval="3000" :duration="1000">
			<swiper-item class="product-detail-banner-container-item" v-for="(item,index) in bannerList" :key="index">
				<image class="product-detail-banner-container-item-img" :src="item"></image>
			</swiper-item>
		</swiper>

		<uni-icons @tap="collectStar" class="product-detail-star" :color="starCollected?'red':'#fff'" type="star"
			size="40"></uni-icons>

		<view class="product-detail-info">
			<view class="product-detail-info-price">
				<view class="product-detail-info-price-float">¥</view>
				<view class="product-detail-info-price-integer">{{priceInter}}</view>
				<view class="product-detail-info-price-float">.{{priceFloat}}</view>
				<view class="product-detail-info-price-text">没有促销使用原价</view>
			</view>
			<view class="product-detail-info-name">{{detail.name}}</view>
			<view class="product-detail-info-description">{{detail.description}}</view>
			<mp-html :tag-style="obj" class="product-detail-info-imgs" :content="detail.detailMobileHtml" />
		</view>
		<view class="bottom-operate">
			<i class="iconfont bottom-operate-kefu icon-kefu"></i>
			<view @tap="addInCart(0)" class="bottom-operate-cart">添加到购物车</view>
			<view @tap="addInCart(1)" class="bottom-operate-buy">立即购买</view>

		</view>

		<!-- 遮罩层 -->
		<view @tap="closeMask" @touchmove.stop.prevent class="mask" v-if="maskIsShow">
			<view class="mask-content" @tap.stop>
				<uni-icons @tap="closeMask" class="mask-content-close" type="closeempty" size="20" color="#333333">
				</uni-icons>
				<view class="top-container">
					<image class="top-container-img" :src="skuList[current].pic" v-if="skuList.length"></image>
					<view class="top-container-name-continer">
						<view class="top-container-name-continer-name">{{detail.name}}</view>
						<view class="top-container-name-continer-stock" v-if="skuList.length">
							库存数量:{{skuList[current].stock}}</view>
					</view>
				</view>
				<!-- 规格 -->
				<view class="sku-choose">
					<view class="sku-choose-title">商品选择</view>
					<scroll-view @touchmove show-scrollbar scroll-y class="content">
						<view @tap="changeSku(index)"
							:class="current==index?'sku-choose-item checked':'sku-choose-item'"
							v-for="(item,index) in skuList" :key="item.id">
							{{item.spData | format}}
						</view>

					</scroll-view>
				</view>
				<!-- 特色选择 -->
				<view class="special-service">
					<view class="special-service-title">特色服务</view>
					<view class="special-service-item">送货上门</view>
					<view class="special-service-item">上门安装</view>
				</view>
				<!-- 购买数量 -->
				<view class="buy-num">
					<view class="buy-num-title">购买数量</view>
					<view class="buy-num-choose">
						<view @tap="subBuyNum" class="buy-num-choose-sub">-</view>
						<view class="buy-num-choose-input">{{buyNum}} </view>
						<view @tap="addBuyNum" class="buy-num-choose-add">+</view>

					</view>
				</view>
				<view @tap="sureSubmit" class="make-sure">确定</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		productDetail as productDetailApi,
		addCart as addCartApi,
		addPreOrder as addPreOrderApi
	} from '@/api/common/index.js'
	import mixin from '../../mixin/index.js'
	import {
		showTip
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				id: '', //传进来的商品id
				detail: {}, //商品详情
				bannerList: [], //商品轮播图
				priceInter: 0, //价格整数
				priceFloat: '', //价格小数
				skuList: [], //sku列表
				current: 0, //选的第几个规格
				buyNum: 1, //购买|加入购物车数量
				maskIsShow: false, //遮罩层显示与隐藏
				starCollected: false, //商品收藏与否
				autoa: "overflow:auto",
				flag: 0, //0代表添加到购物车中,1代表立即购买
				obj: {
					div: "color:gray"
				},
				stock: 0
			}
		},
		mixins: [mixin],
		filters: {
			//过滤器处理规格sku
			format(value) {
				value = JSON.parse(value);
				var str = "";
				value.forEach(ele => {
					str += ele.key + ':' + ele.value + ' ';
				})
				return str
			}
		},
		onLoad(configs) {
			this.id = configs.id;
			this.getProductDetail();

		},
		methods: {
			//点击遮罩层确认按钮
			sureSubmit() {

				if (this.flag) { //立即购买
					if (this.buyNum > this.skuList[this.current].stock) {
						var message = `您购买的商品:${this.detail.name},型号${this.skuList[this.current].spData}:,当前库存仅为${this.skuList[this.current].stock},购买失败`;
				
						showTip(message,'none',2000)
						return;
					}
					addPreOrderApi({
							"orderItemList": [{
								"productId": this.id,
								"productQuantity": this.buyNum,
								"productSkuId": this.skuList[this.current].id
							}]
						})
						.then(res => {
							uni.setStorageSync('toDelCart', [])
							// showTip('生成订单成功,1s后跳到订单确认页面!','success')
							uni.showToast({
								title: '生成订单成功,1s后跳到订单确认页面!',
								icon: "success",
								mask: false,
								duration: 2000
							})
							var orderId = res.data.orderId;
							uni.setStorageSync('orderId', orderId)
							setTimeout(() => {
								uni.navigateTo({
									url: `confirmOrder/confirmOrder?orderId=${orderId}`
								})
							}, 1000);

						})
				} else { //加入购物车
					if (this.buyNum > this.skuList[this.current].stock) {
						showTip('加入购物车失败,此商品库存不足!')
						return;
					}
					addCartApi({
							"productId": this.id,
							"productSkuId": this.skuList[this.current].id,
							"quantity": this.buyNum
						})
						.then(res => {
							this.maskIsShow = false;
						})
				}

			},
			scrollMask() {
				return true;
			},
			//商品收藏与否的操作
			collectStar() {
				if (this.checkLoginStatus()) { //处于登录成功状态
					if (this.starCollected) { //商品处于收藏状态
						this.starCollected = false;
						uni.showToast({
							title: '取消收藏'
						});
						//取消收藏,删除掉对该商品的存储
						var collectedArr = uni.getStorageSync('collectedArr');
						var idx = collectedArr.findIndex(ele => ele.id == this.detail.id);
						collectedArr.splice(idx, 1);
						uni.setStorageSync('collectedArr', collectedArr);
					} else { //商品处于取消状态
						this.starCollected = true;
						uni.showToast({
							title: '收藏成功'
						});
						//对收藏的商品进行存储
						var collectedArr = uni.getStorageSync('collectedArr');
						if (collectedArr.length == 0) {
							collectedArr = [];
						}
						collectedArr.unshift(this.detail);
						uni.setStorageSync('collectedArr', collectedArr);
					}
				}

			},
			showMask() {
				this.maskIsShow = true;
				this.autoa = "overflow:hidden"
			},
			//关闭遮罩层
			closeMask() {
				this.autoa = "overflow:auto"
				this.maskIsShow = false;
			},
			//加入到购物车中
			addInCart(idx) {
				this.autoa = "overflow:hidden"
				this.maskIsShow = true;
				if (idx == 0) { //添加到购物车中
					this.flag = 0;
				} else { //立即购买
					this.flag = 1
				}
			},
			//立即购买 
			buyNow() {
				this.autoa = "overflow:hidden"
				this.maskIsShow = true;
			},
			//增加购买|加入购物车数量
			addBuyNum() {
				this.buyNum++;
			},
			//删减购买|加入购物车数量
			subBuyNum() {
				if (this.buyNum > 0) {
					this.buyNum--;
				}
			},
			//选择sku规格
			changeSku(index) {
				this.current = index;
			},
			//获取商品详情
			getProductDetail() {
				productDetailApi(this.id)
					.then(res => {

						this.detail = res.data.product;
						this.bannerList = this.detail.albumPics.length ? this.detail.albumPics.split(',') : [this
							.detail.pic
						];

						var price = res.data.product.price;
						this.priceInter = price.toString().split('.')[0];
						this.priceFloat = price.toString().split('.')[1] ? price.toString().split('.')[1] : '00';
						this.skuList = this.detail.skuList;
						//判断商品是否被收藏过
						var collectedArr = uni.getStorageSync('collectedArr');
						if (collectedArr.length != 0) {
							this.starCollected = collectedArr.some(ele => ele.id == this.detail.id);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-detail {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #f1ece7;

		&-star {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			background-color: #354e44;
			top: 634rpx;
			right: 100rpx;
			line-height: 100rpx;
			border-radius: 50%;
			transform: translateY(-50%);
		}

		//轮播图
		&-banner-container {
			width: 100%;
			height: 634rpx;

			&-item {
				width: 100%;
				height: 100%;

				&-img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}

		&-info {
			padding: 70rpx 68rpx 140rpx;

			&-price {
				display: flex;
				align-items: baseline;
				color: #f2270c;
				font-size: 24rpx;
				line-height: 34rpx;
				font-weight: 700;
				margin-bottom: 20rpx;

				&-float {
					font-size: 36rpx;
				}

				&-integer {
					font-size: 60rpx;
					line-height: 60rpx;
				}

				&-text {
					margin-left: 10rpx;
					color: #fff;
					padding: 0 10rpx;
					font-weight: 400;
					background-color: #f2270c;
				}

			}

			&-name {
				color: #333333;
				font-weight: 700;
				font-size: 40rpx;
				margin-bottom: 20rpx;
			}

			&-description {
				margin-bottom: 130rpx;
				color: #946d82;
				font-size: 28rpx;
			}

			//html中的图片
			::v-deep &-imgs {
				margin-top: 40rpx;
				width: 100%;
				height: auto;

			}

		}

		//底部加入购物车
		.bottom-operate {
			display: flex;
			position: fixed;
			justify-content: flex-start;
			width: 100%;
			box-sizing: border-box;
			height: 120rpx;
			padding: 20rpx 0;
			line-height: 80rpx;
			background-color: #FFFFFF;
			bottom: 0;
			left: 0;
			z-index: 10;

			&-kefu {
				flex: 1;
				text-align: center;
				font-size: 60rpx;
			}

			&-cart {
				padding: 0 30rpx;
				color: #d2b29e;
				background-color: #e2e2e2;
			}

			&-buy {
				background-color: #354e44;
				color: #FFFFFF;
				padding: 0 60rpx;
				margin-right: 60rpx;
			}

		}

		//遮罩层
		.mask {
			display: flex;
			position: fixed;
			justify-content: center;
			align-items: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, .5);
			z-index: 10;

			&-content {
				position: relative;
				width: 628rpx;
				height: 926rpx;
				padding: 40rpx;
				box-sizing: border-box;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				z-index: 12;

				&-close {
					position: absolute;
					top: 30rpx;
					right: 30rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 1rpx solid #333333;
				}

				.top-container {
					display: flex;
					align-items: center;
					height: 192rpx;

					&-img {
						position: relative;
						width: 192rpx;
						height: 192rpx;
						transform: translateY(-50%);
						margin-right: 30rpx;
					}

					&-name-continer {
						flex: 1;

						&-name {
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: 700;
						}

						&-stock {
							color: #CCCCCC;
							font-size: 28rpx;
						}
					}

				}

				//规格选择sku
				.sku-choose {
					// position: relative;
					width: 100%;

					&-title {
						font-weight: 700;
					}

					.content {
						// position: relative;
						overflow: auto;
						width: 100%;
						height: 150rpx;
					}

					&-item {
						box-sizing: border-box;
						width: 100%;
						height: 60rpx;
						background-color: #f2f4f3;
						border-radius: 15rpx;
						margin: 15rpx auto;
						line-height: 60rpx;
						color: #3e3e3e;
						text-indent: 10rpx;
						font-size: 28rpx;

						&.checked {
							border: 1rpx solid #333;
						}
					}
				}

				// 特色服务
				.special-service {
					margin-top: 30rpx;

					&-title {
						font-weight: 700;
					}

					&-item {
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 15rpx;
						text-indent: 10rpx;
						background-color: #f2f4f3;
						margin: 15rpx auto;
					}
				}

				//购买数量
				.buy-num {
					display: flex;
					margin-top: 60rpx;
					height: 60rpx;
					justify-content: space-between;
					align-items: center;

					&-title {
						font-weight: 700;
					}

					&-choose {
						display: flex;
						width: fit-content;
						justify-content: flex-end;
						align-items: center;
						text-align: center;
						line-height: 60rpx;

						&-sub,
						&-add {
							display: block;
							width: 60rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background-color: #f1ece7;
						}

						::v-deep &-input {
							display: block;
							min-width: 90rpx;
							// width: 90rpx;
							height: 60rpx;
							margin: 0 15rpx;
							border-radius: 30rpx;
							padding: 0 20rpx;
							background-color: #f1ece7;
						}


					}
				}
			}

			.make-sure {
				margin: 40rpx auto;
				width: 208rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #FFFFFF;
				border-radius: 20rpx;
				background-color: #354e44;
			}
		}
	}
</style>
